<template>
  <el-container>
    <el-container class="processing-container">
      <el-main class="processing-main">
        <el-card>
          <div class="r-card-header">{{ $t('workOrderMg.OrdrInfo') }}</div>
          <OrdrInfo :is-closed="isClosed" />
        </el-card>
        <el-card>
          <div class="r-card-header">{{ $t('workOrderMg.ReplyLogs') }}</div>
          <ReplyLogs :is-closed="isClosed" />
        </el-card>
        <el-card>
          <div class="r-card-header">{{ $t('workOrderMg.OperateLogs') }}</div>
          <OperateLogs />
        </el-card>
        <el-card v-if="isClosed">
          <div class="r-card-header">{{ $t('workOrderMg.ProcessResult') }}</div>
          <ProcessResult />
        </el-card>
      </el-main>
      <el-aside class="processing-aside " width="400px">
        <el-card>
          <SideTabs />
        </el-card>
      </el-aside>
    </el-container>
    <el-card v-if="isProcess" class="r-global-footer footer-card">
      <el-button
        v-if="workOrderInfo.orderStatusCode === 'statusPending'"
        type="primary"
        :loading="loading"
        @click="orderTake"
      >
        <!-- 待接单 -->
        {{ $t('workOrderMg.orderReceiving') }}
      </el-button>
      <el-button
        v-else-if="workOrderInfo.orderStatusCode === 'statusProcessing'"
        type="primary"
        :loading="loading"
        plain
        @click="modalKeys.closeOrder = true"
      >
        <!-- 处理中 -->
        {{ $t('workOrderMg.close') }}
      </el-button>
      <el-button
        v-else-if="isClosed"
        disabled
        @click="modalKeys.closeOrder = true"
      >
        <!-- 已处理 已关闭-->
        {{ $t('workOrderMg.closed') }}
      </el-button>
    </el-card>
    <CloseOrder :visible.sync="modalKeys.closeOrder" />
  </el-container>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import SideTabs from './components/SideTabs'
import OrdrInfo from './components/OrdrInfo'
import ReplyLogs from './components/ReplyLogs'
import OperateLogs from './components/OperateLogs'
import ProcessResult from './components/ProcessResult'
import CloseOrder from './components/CloseOrder'

// 工单状态
// statusPending: 待处理, statusProcessing: 处理中, statusProcessed: 已处理

const modalKeys = {
  closeOrder: false,
  modifyWo: false
}

export default {
  components: {
    SideTabs,
    OrdrInfo,
    ReplyLogs,
    OperateLogs,
    ProcessResult,
    CloseOrder
  },

  data() {
    const { processId, viewId } = this.$route.query
    return {
      modalKeys,
      workOrderId: processId || viewId,
      isProcess: !!processId
    }
  },
  computed: {
    ...mapState('workOrder', ['workOrderInfo']),
    ...mapGetters(['loading']),
    isClosed() {
      const { orderStatusCode } = this.workOrderInfo
      return !orderStatusCode || orderStatusCode === 'statusProcessed'
    }
  },
  provide() {
    return {
      workOrderId: this.workOrderId,
      isProcess: this.isProcess,
    }
  },

  mounted() {
    this.$store.dispatch('workOrder/loadWorkOrderById', this.workOrderId)
  },
  methods: {
    orderTake() {
      this.$store.dispatch('workOrder/onWoTake')
    }
  }
}
</script>

<style lang="scss" scoped>
@import './components/style.scss';
</style>
